<template>
	<view>
		<view class="s-addr-box">
			<view>
				<s-list-cell :hover="false" padding="0">
					<view class="s-line-cell">
						<view class="s-title">收货人</view>
						<input placeholder-class="s-phcolor" class="s-input" v-model="name" placeholder="请输入收货人姓名" maxlength="15" type="text" />
					</view>
				</s-list-cell>
				<s-list-cell :hover="false" padding="0">
					<view class="s-line-cell">
						<view class="s-title">手机号码</view>
						<input type="number" placeholder-class="s-phcolor" class="s-input" v-model="phone" placeholder="请输入收货人手机号码" maxlength="11" /> 
					</view>
				</s-list-cell>
				<s-list-cell :arrow="true" padding="0">
					<view class="s-line-cell">
						<view class="s-title">所在城市</view>
						<picker :value="value" mode="multiSelector" @change="picker" @columnchange="columnPicker" :range="area_arr">
							<view :class="province_id>0?'s-input':'s-input s-phcolor'">{{area_str}}</view>
						</picker>		
					</view>
				</s-list-cell>
				<s-list-cell :hover="false" padding="0">
					<view class="s-line-cell">
						<view class="s-title">收货地址</view>
						<input placeholder-class="s-phcolor" class="s-input" v-model="detailed_address" placeholder="请输入详细的收货地址" maxlength="50" type="text" />
					</view>
				</s-list-cell>
				<s-list-cell :hover="false" padding="0">
					<view class="s-swipe-cell">
						<view>设为默认地址</view>
						<switch :checked="status" color="#30CC67" class="s-switch-small" @change="status_change"/>
					</view>
				</s-list-cell>
			</view>
			<view class="s-addr-save">
				<s-button type="danger" height="88upx" @click="edit_address">保存收货地址</s-button>
			</view>
			<view class="s-del">
				<s-button type="gray" height="88upx" @click="delete_address">删除收货地址</s-button>
			</view>
		</view>
		
	</view>
	 
</template>

<script>
	export default {
		data() {
			return {
				id:'',//地址ID
				area_str:'请选择城市',
				area_arr:[], //picker数据
				area_list:[],//所有省市区数据
				value: [0, 0, 0],//选择地址索引
				province_id:0,//省id
				city_id:0,//市id
				county_id:0,//区县id
				name:'',//收货人
				phone:'',//手机号码
				detailed_address:'',//收货地址
				status:true,//是否默认
			}
		},
		async onLoad(options) {
			this.id = options.id
		},
		async onShow() {
			await this._onLoad()
		},
		methods: {
			async _onLoad(){
				await this.getArea()
				await this.getAddressInfo()
			},
			//获取省市区
			async getArea(){
				const data = await this.$s.model.address.getArea()
				this.area_list = data;
				this.area_arr = [this.toArr(data),this.toArr(data[0].children),this.toArr(data[0].children[0].children)]
			},
			//获取编辑地址数据
			async getAddressInfo(){
				const data = await this.$s.model.address.getAddressInfo({id:this.id})
				this.area_str = data.province_name+data.city_name+data.county_name;
				this.province_id = data.province_id
				this.city_id = data.city_id
				this.county_id = data.county_id
				this.name = data.name
				this.phone = data.phone
				this.detailed_address = data.detailed_address
				this.status = data.status?true:false
			},
			async delete_address(){
				const res = await this.$s.uniApi.showModal({content:'确定要删除当前收货地址吗？'})
				if (res.confirm) {
					await this.$s.model.address.deleteAddress({id:this.id})
					return await this.$s.uniApi.navigateBack({})
				}
			},
			//地址编辑
			async edit_address(){
				var that =this;
				var name = that.name;
				var phone = that.phone;
				var detailed_address = that.detailed_address;
				var province_id = that.province_id;
				var city_id = that.city_id;
				var county_id = that.county_id;
				var status = this.status?1:0;
				if(name == ''){
					return await this.$s.uniApi.showToast({title: '请输入收货人姓名！'});
				}
				if(!this.$s.api.isPhoneNumber(phone)){
					return await this.$s.uniApi.showToast({title: '请输入收货人手机号码！'});
				}
				if(province_id == 0 || city_id == 0 || county_id == 0){
					return await this.$s.uniApi.showToast({title: '请选择城市！'});
				}
				if(detailed_address == ''){
					return await this.$s.uniApi.showToast({title: '请输入详细的收货地址！'});
				}
				await this.$s.model.address.editAddress({
					id:that.id,
					name:name,
					phone:phone,
					detailed_address:detailed_address,
					status:status,
					province_id:province_id,
					city_id:city_id,
					county_id:county_id
				})
				return await this.$s.uniApi.navigateBack({})
			},
			status_change(){
				this.status = !this.status;
			},
			
			columnPicker: function(e) {
				var that = this;
				//第几列 下标从0开始
				var column = e.detail.column;
				//第几行 下标从0开始
				var value = e.detail.value;
				if (column === 0){
					that.value = [value, 0, 0];
					that.area_arr[1] =  that.toArr(that.area_list[value].children);
					that.area_arr[2] =  that.toArr(that.area_list[value].children[0].children);
				} else if (column === 1){
					that.area_arr[2] =  that.toArr(that.area_list[that.value[0]].children[value].children);
					that.value = [that.value[0],value, 0];
				}else if(column === 2){
					that.value = [that.value[0],that.value[1],value];
				}
			}, 
			//点击地区数据
			picker: function(e) {
				var that = this;
				var value = e.detail.value;
				that.province_id = that.area_list[value[0]].id;
				that.city_id = that.area_list[value[0]].children[value[1]].id;
				that.county_id =  that.area_list[value[0]].children[value[1]].children[value[2]].id;
				that.area_str = that.area_list[value[0]].name + that.area_list[value[0]].children[value[1]].name + that.area_list[value[0]].children[value[1]].children[value[2]].name;
			},
			//数据格式化
			toArr(data_arr){
				var arr = [];
				for(var i = 0;i<data_arr.length;i++){
					arr.push(data_arr[i].name);
				}
				return arr;
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'edit_address.scss';
</style>
